<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查询统计</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/find' }">职工补贴查询</el-breadcrumb-item>
      <el-breadcrumb-item>补贴详细信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>补贴信息填写</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="refresh">
          <i class="el-icon-refresh"></i>
        </el-button>
      </div>
      <el-row style='display: flex!important;align-items: center!important;' :gutter="20">
        <el-col>
          <div style='font-size: 15px;font-weight:800'>
            已选择指标文
          </div>
        </el-col>
      </el-row>

      <el-table :data="indicatorlist" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="指标文号" prop="zbwh"></el-table-column>
        <el-table-column label="单位账号" prop="gjjzh"></el-table-column>
        <el-table-column label="总金额" prop="hjje"></el-table-column>
        <el-table-column label="已使用金额" prop="hjybje"></el-table-column>
        <el-table-column label="剩余金额" prop="syje"></el-table-column>
        <el-table-column label="资金来源" prop="zjly"></el-table-column>
      </el-table>

      <!-- 添加角色按钮区域 -->
      <el-row style='display: flex!important;align-items: center!important;margin-top: 15px;' :gutter="20">
        <el-col>
          <div style='font-size: 15px;font-weight:800'>
            职工录入
          </div>
        </el-col>
      </el-row>

      <!-- 角色列表区域 -->
      <el-table :data="stafflist" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-view" @click="viewStaffDialog(scope.row)" size="mini">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加角色按钮区域 -->
      <el-row style='display: flex!important;align-items: center!important;margin-top: 15px;' :gutter="20">
        <el-col :span="20">
          <div style='font-size: 15px;font-weight:800'>
            统计信息
          </div>
        </el-col>
      </el-row>

      <!-- 角色列表区域 -->
      <el-table :data="statisticslist" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '12px'}">
        <!-- 索引列 -->
        <el-table-column label="指标文总金额" prop="zbwzje"></el-table-column>
        <el-table-column label="发放总金额" prop="ffzje"></el-table-column>
        <el-table-column label="涉及的职工人数" prop="sjzgrs"></el-table-column>
      </el-table>

      <el-row style='display: flex!important;align-items: center!important;margin-top: 10px' :gutter="20">
        <el-col style='display: flex!important;justify-content: center'>
          <el-button type="primary" size="medium" @click='goBack'>返回</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 分配权限的对话框 -->
    <el-dialog title="继承信息查看"  :visible.sync="addInheritorDialogVisible" width="70%">
      <el-row>
        <el-col :span="3">
          <div style='font-weight: bold'>
            职工信息
          </div>
        </el-col>
      </el-row>

      <el-row style='margin-top: 10px;'>
        <el-col :span="5">
          职工姓名：{{staff.name}}
        </el-col>
        <el-col :span="10">
          职工身份证号：{{staff.id}}
        </el-col>
      </el-row>

      <el-row style='margin-top: 10px;'>
        <el-col>
          <div style='font-weight: bold'>
            继承人信息
          </div>
        </el-col>
      </el-row>
      <el-table :data="staff.inheritorList" border stripe>
        <!-- 索引列 -->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="继承人姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="idNumber"></el-table-column>
        <el-table-column label="联系电话" prop="phoneNumber"></el-table-column>
        <el-table-column label="银行卡号" prop="cardNumber"></el-table-column>
        <el-table-column label="实领金额" prop="realBroughtAmount"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" size="mini" @click="getNotarization(scope.row.inheritorId)">查看公证材料</el-button>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInheritorDialogVisible = false">确定</el-button>
        <el-button @click="addInheritorDialogVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <!--公证信息弹窗-->
    <el-dialog class='el_img_dialog' title="公证材料" :visible.sync="notarizationDialogVisible" width="50%">
      <template v-for="(item,index) in imageList" >
        <span style=" color: slategrey;font-size: 18px;font-weight: bold;">公证人材料{{index+1}}如下:</span>
        <img :src="item.src" style='width:100%;height: 100%'>
        <br>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allowanceId: '',
      // 所有角色列表数据
      statisticslist: [],
      indicatorlist: [],
      stafflist: [],
      addInheritorDialogVisible: false,
      materialDialogVisible: false,
      // 可选择的数据
      chooseList: [],
      excelList: [],
      staff: {
        name: '',
        state: '在职',
        id: '',
        card: '',
        subsidies: '',
        inheritorList: []
      },
      inheritor: {
        name: '',
        phone: '',
        id: '',
        card: '',
        subsidies: '',
        src: ''
      },
      chooseInfo: {
        name1: '',
        name2: 'AA单位',
        fundingSources: '财政'
      },
      imageList:[],//证明材料列表
      notarizationDialogVisible: false
    }
  },
  created() {
    this.allowanceId = this.$route.query.id
    let gjjzh = parseInt(this.$route.query.gjjzh)
    this.AllOfList(this.allowanceId, gjjzh)
  },
  methods: {
    refresh() {
      this.AllOfList()
    },
    // 获取所有角色的列表
    async AllOfList(allowanceId, gjjzh) {
      console.log(this.statisticslist)
      let that = this
      this.$http.get('/allowance/getAllowanceDetail', { params: {allowanceId: allowanceId} }, {emulateJSON:true}).then(function({ data: res }){
        if (res.code !== 200) {
          return this.$message.error('获取补贴列表失败！')
        }
        for(let i = 0; i < res.data.zbwhList.length; i++){
          that.$http.get('/zbwmx/findByZbwhAndGjjzh', {params: {gjjzh: gjjzh, zbwh: res.data.zbwhList[i]}} , { emulateJSON:true }).then(function({ data: { data: data} }){
            data.syje = data.hjje - data.hjybje
            that.indicatorlist.push(data)
          })
        }
        for(let j = 0; j < res.data.employeeList.length; j++){
          that.$http.get('/employee/findByIdAndGjjzh', {params: {gjjzh: gjjzh, employeeId: res.data.employeeList[j]}} , { emulateJSON:true }).then(function({ data: { data: data} }){
            that.stafflist.push(data)
            let zbwzje = 0
            let ffzje = 0
            that.indicatorlist.forEach(item =>{
              zbwzje += item.hjje
              ffzje += item.hjybje
            })
            that.statisticslist = []
            that.statisticslist.push({zbwzje: zbwzje, ffzje: ffzje, sjzgrs: that.stafflist.length})
          })
        }
        // console.log('123',res)
        if(res.data.zbwhList.length === 0){
          let zbwzje = 0
          let ffzje = 0
          that.indicatorlist.forEach(item =>{
            zbwzje += item.hjje
            ffzje += item.hjybje
          })
          that.statisticslist = []
          that.statisticslist.push({zbwzje: zbwzje, ffzje: ffzje, sjzgrs: that.stafflist.length})
        }
      })
    },
    async getInheritorList(employeeId) {
      this.staff.inheritorList = []
      let that = this
      this.$http.get(`/inheritor/recordDetail/${this.allowanceId}/${employeeId}`,
        {emulateJSON:true}
      ).then(function(data){
        console.log('1234',data)
        if (data.data.code !== 200) {
          return that.$message.error('获取继承人列表失败！')
        }
        that.staff.inheritorList = data.data.data
        console.log('123',that.staff.inheritorList)
        // console.log(that.staff.inheritorList)
        // that.inheritorListInfo.total = data.data.total
        that.addInheritorDialogVisible = true
      })
    },
    indicatorUp() {
    },
    indicatorDown() {
    },
    viewStaffDialog(staff) {
      this.staff = {
        name: staff.name,
        id: staff.idNumber,
        card: staff.cardNumber,
        employeeId: staff.employeeId
      }
      this.getInheritorList(staff.employeeId)
    },
    materialDialog(inheritor) {
      this.addInheritorDialogVisible = false
      let that = this
      this.$http.get('inheritorRecord/getImage',
        { params: {inheritorRecordId: inheritor.inheritorRecordId}, responseType: 'blob'}, {
        emulateJSON:true}).then(function(data){
        if (data.status !== 200) {
          return that.$message.error('获取公证材料失败！')
        }
        that.inheritor.src = window.URL.createObjectURL(data.data);
        console.log(that.inheritor.src)
      })
      this.materialDialogVisible = true
    },
    editInheritor() {
    },
    goBack() {
      this.$router.push('/find')
    },
    //打开查看公证材料弹窗
    getNotarization(id){
      console.log('继承人',id)
      this.notarizationDialogVisible= true
      this.$http.get(`inheritor/downloadFile/${this.staff.employeeId}/${id}`,{
        emulateJSON:true}).then(res => {
        if (res.data.code !== 200) {
          this.$message.error('获取公证材料失败！')
        }
        else{
          console.log(res.data.data)
          this.imageList =res.data.data
          console.log(this.notarizationSrc)
          this.imageList.forEach( item => {
            if (item.type === 'jpg' || item.type === 'jpeg') {
              item.src = `data:image/jpeg;base64,${item.file}`
            } else {
              item.src = `data:image/png;base64,${item.file}`
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-tag {
  margin: 7px;
}

.bdtop {
  border-top: 1px solid #eee;
}

.bdbottom {
  border-bottom: 1px solid #eee;
}

.vcenter {
  display: flex;
  align-items: center;
}
</style>
